<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%
	String baseP = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ "/";
%>
<!doctype html>
<html>
<head>
<c:if test="${type == 1}">
	<title>微信公共平台</title>
</c:if>
<c:if test="${type == 2}">
	<title>微博公共平台</title>
</c:if>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cleartype" content="on" />
<link rel="shortcut icon" href="/nocontent" />
<link href="<c:url value='/resource/wx/css/wxjz.css'/>" rel="stylesheet"/>
<script type="text/javascript" src="<c:url value='/resource/js/jquery-1.11.0.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/easyui/easyloader.js'/>"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta name="viewport" id="viewport" />

</head>
<body>
<div class="search">
<%--<img src="<c:url value='/resource/images/theme/3/images/wechat_search.png'/>">--%>
	<c:if test="${type == 1}">
		<input oninput="ischange()" id="search" type="text" placeholder="请输入微信账号名称">
	</c:if>
	<c:if test="${type == 2}">
		<input oninput="ischange()" id="search" type="text" placeholder="请输入微博账号名称">
	</c:if>
</div>

	<div id="searchResult">
	<c:forEach var="accounts" items="${wxjqList}" varStatus="vs">
		<c:if test="${vs.index % 3 == 0}">
		<ul class="ul_main">
		</c:if>
			<li>
				<a href="${accounts.url }" class="a_img">
					<img src="<c:url value='/resource/wxjq_icons/${accounts.icon }'/>">
				</a>
				<p>${accounts.title}</p>

			</li>
		<c:if test="${vs.index % 3 == 2 or vs.last}">
		</ul>
		</c:if>
	</c:forEach>
	</div>
	<%--<div class="sslk_more" style="cursor: pointer;" onclick="more(this)">加载更多</div>--%>
	<script type="text/javascript">
	var currentPage = 0;
	var search_key = "";
	var areaId = "${areaId}";
	$(function() {
		beforeShow();
		currentPage = 1;
	});
	
	function ischange(){
		search_key = $("#search").val();
		loadMore(1, search_key, 0,areaId);
	}
	function beforeShow(){
		$(".introduct").each(function(i) {
				var intro = $(this).text();
				var introLen = intro.length;
				if (50 < introLen) {
					$(this).text(intro.substring(0, 35) + "...");
				}
			});
		$(".label").each(function(i) {
				var intro = $(this).text();
				var introLen = intro.length;
				if (11 < introLen) {
					$(this).text(intro.substring(0, 10) + "...");
				}
			});
	}
	
	function more(obj){
			$(obj).html("加载中");
			currentPage ++;
			loadMore(currentPage, search_key, 1,areaId);
		}
	
	//page:当前页数，key:查询条件，searchType:查询类型--0：按条件查询， 1：加载更多
	function loadMore(page, _key ,searchType,areaId){
	        /*var key = encodeURI(encodeURI(_key));
			if(!page)
				page = 1;*/
			
			$.ajax({
				url : "<c:url value='/api/police/wechatAccountsQuery'/>?title="+_key+"&areaId="+areaId+"&type=${type}",
				type : "get",
				timeout : 6000,
				dataType:"json",
				async : false,
				beforeSend:function(){
					$(".sslk_more").html("数据加载中");
				},
				success : function(data) {
					if(data.length==0){
						$("#searchResult").html("未查询到对应记录！");
					}else{
						var resultHtml = "";

						$.each(data,function(index,content){
							if(index % 3 == 0){
								resultHtml += "<ul class='ul_main'>";
							}
							resultHtml += "<li><a href='"+content.url+"' class='a_img'>";
							resultHtml += "<img src='<c:url value='/resource/wxjq_icons/"+content.icon+"'/>'>";
							resultHtml += "</a><p>"+content.title+"</p></li>";
							if(index % 3 == 2 || index==data.length){
								resultHtml += "</ul>";
							}
						});

						$("#searchResult").html(resultHtml);
					}

				}
			});
		}
	</script>
</body>
</html>
